<template>
    <div class="resume-container" :class="{ 'dark-mode': isDark }">
      <!-- 头部：头像 + 基本信息 -->
      <el-row :gutter="24" class="header-section">
        <el-col :xs="24" :sm="24" :md="8" :lg="6" class="avatar-col">
          <el-avatar
            :size="120"
            src="https://via.placeholder.com/120?text=你的头像"
            class="avatar"
          />
        </el-col>
  
        <el-col :xs="24" :sm="24" :md="16" :lg="18" class="info-col">
          <h1 class="name">{{ resume.name }}</h1>
          <p class="title">{{ resume.title }}</p>
          <el-divider />
  
          <div class="contact-info">
            <el-space direction="vertical" :size="8">
              <el-link href="mailto:{{ resume.email }}" target="_blank">
                <el-icon><Message /></el-icon>
                {{ resume.email }}
              </el-link>
              <el-link href="tel:{{ resume.phone }}" target="_blank">
                <el-icon><Phone /></el-icon>
                {{ resume.phone }}
              </el-link>
              <el-link href="{{ resume.github }}" target="_blank">
                <el-icon><Github /></el-icon>
                GitHub
              </el-link>
            </el-space>
          </div>
  
          <el-divider />
  
          <div class="skills">
            <span class="label">技能标签：</span>
            <el-space :wrap="true" :size="8">
              <el-tag
                v-for="(skill, index) in resume.skills"
                :key="index"
                type="info"
                size="small"
                effect="dark"
              >
                {{ skill }}
              </el-tag>
            </el-space>
          </div>
        </el-col>
      </el-row>
  
      <!-- 自我介绍 -->
      <el-card class="section" shadow="hover">
        <template #header>
          <h2>自我介绍</h2>
        </template>
        <p>{{ resume.introduction }}</p>
      </el-card>
  
      <!-- 教育经历 -->
      <el-card class="section" shadow="hover">
        <template #header>
          <h2>教育经历</h2>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(edu, index) in resume.education"
            :key="index"
            :timestamp="`${edu.start} – ${edu.end}`"
            placement="top"
          >
            <el-card class="timeline-card" shadow="never">
              <h3>{{ edu.school }}</h3>
              <p class="degree">{{ edu.degree }}</p>
              <p class="description">{{ edu.description }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
  
      <!-- 工作经历 -->
      <el-card class="section" shadow="hover">
        <template #header>
          <h2>工作经历</h2>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(job, index) in resume.jobs"
            :key="index"
            :timestamp="`${job.start} – ${job.end}`"
            placement="top"
            icon="el-icon-s-promotion"
          >
            <el-card class="timeline-card" shadow="never">
              <h3>{{ job.company }}</h3>
              <p class="position">{{ job.position }}</p>
              <ul class="responsibilities">
                <li v-for="(resp, i) in job.responsibilities" :key="i">
                  {{ resp }}
                </li>
              </ul>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
  
      <!-- 底部版权 -->
      <div class="footer">
        © {{ new Date().getFullYear() }} {{ resume.name }} · 个人简历
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue'
  import {
    Message,
    Phone,
    User,
    Document,
    Clock,
    Star,
    ChatDotRound,
  } from '@element-plus/icons-vue'
  
  // ✅ 所有数据定义在这里 —— 可轻松替换
  const resume = ref({
    name: '张三',
    title: '全栈开发工程师',
    email: 'zhangsan@example.com',
    phone: '+86 138-0013-8000',
    github: 'https://github.com/zhangsan',
    skills: ['Vue 3', 'TypeScript', 'Nuxt.js', 'FastAPI', 'PostgreSQL', 'Docker'],
    introduction:
      '拥有5年Web开发经验，专注于前端工程化与后端API设计。擅长构建高性能、高可用的现代化应用，热衷于开源社区和技术创新。注重代码质量与团队协作，追求极致用户体验。',
    education: [
      {
        school: '清华大学',
        degree: '计算机科学与技术 学士',
        start: '2016',
        end: '2020',
        description: '主修数据结构、算法、操作系统、网络编程，GPA 3.8/4.0',
      },
    ],
    jobs: [
      {
        company: '腾讯科技',
        position: '高级前端开发工程师',
        start: '2021',
        end: '至今',
        responsibilities: [
          '主导公司内部管理平台重构，采用 Vue 3 + Pinia + TypeScript，性能提升 40%',
          '设计并实现统一组件库，被 10+ 项目复用，减少重复开发 60% 工时',
          '负责微前端架构落地，支持多团队独立部署与协同开发',
          '优化 CI/CD 流程，发布周期从 3 天缩短至 2 小时',
        ],
      },
      {
        company: '字节跳动',
        position: '前端开发工程师',
        start: '2020',
        end: '2021',
        responsibilities: [
          '参与抖音创作者后台系统开发，日活用户超千万',
          '使用 Nuxt.js 实现 SSR 优化 SEO，自然流量增长 35%',
          '编写自动化测试脚本，单元测试覆盖率提升至 85%',
        ],
      },
    ],
  })
  
  // ✅ 暗黑模式切换（可选）
  const isDark = computed(() => {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
  })
  </script>
  
  <style scoped>
  .resume-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #303133;
    background-color: #f5f7fa;
  }
  
  .resume-container.dark-mode {
    color: #e6e6e6;
    background-color: #4b4141;
  }
  
  .header-section {
    margin-bottom: 32px;
  }
  
  .avatar-col {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  
  .info-col h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: #303133;
  }
  
  .resume-container.dark-mode .info-col h1 {
    color: #ffffff;
  }
  
  .info-col .title {
    font-size: 18px;
    color: #909399;
    margin-bottom: 16px;
  }
  
  .resume-container.dark-mode .info-col .title {
    color: #c0c4cc;
  }
  
  .contact-info a {
    color: #409eff;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .resume-container.dark-mode .contact-info a {
    color: #409eff;
  }
  
  .skills .label {
    font-weight: 600;
    color: #606266;
    margin-right: 8px;
  }
  
  .resume-container.dark-mode .skills .label {
    color: #c0c4cc;
  }
  
  .section {
    margin-bottom: 32px;
    border-radius: 12px;
    overflow: hidden;
  }
  
  .section h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
  }
  
  .resume-container.dark-mode .section h2 {
    color: #ffffff;
  }
  
  .timeline-card {
    border-left: 3px solid #409eff;
    border-top: none;
    border-right: none;
    border-bottom: none;
    padding: 16px;
    margin: 0;
    background: transparent;
  }
  
  .timeline-card h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }
  
  .resume-container.dark-mode .timeline-card h3 {
    color: #ffffff;
  }
  
  .degree {
    font-size: 14px;
    color: #909399;
    margin: 4px 0;
  }
  
  .resume-container.dark-mode .degree {
    color: #c0c4cc;
  }
  
  .description,
  .responsibilities li {
    font-size: 14px;
    line-height: 1.6;
    color: #606266;
    margin: 4px 0;
  }
  
  .resume-container.dark-mode .description,
  .resume-container.dark-mode .responsibilities li {
    color: #dcdfe6;
  }
  
  .responsibilities {
    padding-left: 20px;
    margin: 12px 0 0 0;
    list-style-type: disc;
  }
  
  .footer {
    text-align: center;
    margin-top: 48px;
    padding: 20px;
    color: #909399;
    font-size: 14px;
    border-top: 1px solid #e4e7ed;
  }
  
  .resume-container.dark-mode .footer {
    color: #c0c4cc;
    border-top-color: #303133;
  }
  
  /* 响应式优化 */
  @media (max-width: 768px) {
    .header-section {
      flex-direction: column;
      text-align: center;
    }
  
    .avatar-col {
      margin-bottom: 24px;
    }
  
    .info-col {
      padding: 0 16px;
    }
  
    .section {
      margin: 24px 0;
    }
  }
  
  /* 防止长文本溢出 */
  h3, p, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  </style>